<template>
  <aside class="aud-menu" ref="asideMenu">
    <ul class="aside-menu-ul">
      <li 
        :class="{active: activeNum === index}"
        v-for="(item, index) in datas" 
        :key="item.keyword"
        @click="scaleAsideMenu(item.keyword, index); changeTitle(item.title); setShow()"
        :title="item.title"
      >{{item.keyword.slice(8)}}. {{item.title}}</li>
    </ul>
  </aside>
</template>

<script>
import {getAllAuditions} from '../mock'
import axios from 'axios'

export default {
  name: 'AudMenu',
  data() {
    return {
      datas: [],
      activeNum: -1,
    }
  },
  methods: {
    scaleAsideMenu(path, index) {
      this.$refs.asideMenu.classList = "aud-menu scale-width"
      this.$router.push(`/${path}`)
      this.activeNum = index
    },
    changeTitle(title) {
      this.$store.commit('changeTitle', title)
    },
    setShow() {
      this.$store.commit('setShow', false)
    }
  },
  async mounted() {
    const res = await axios('/api/allAuditions')
    this.datas = res.data.datas
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixins.less';

.aud-menu {
  position: relative;
  width: 100%;
  max-height: 73vh;
  box-sizing: border-box;
  padding: 10px 20px;
  overflow: hidden;
  overflow-y: auto;

  &.scale-width {
    width: 240px;
    transition: width .5s;
  }

  &::-webkit-scrollbar {/*设置滚动条整体属性*/
    width: 5px;
  }

  &::-webkit-scrollbar-track { /*滚动条轨道属性*/
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {/*滚动条内滑块属性*/
    background-color: @bgcolor;
    border-radius: 3px;
  }

  .aside-menu-ul {
    display: flex;
    flex-wrap: wrap;

    li {
      min-width: 180px;
      height: 40px;
      max-width: 200px;
      text-align: center;
      line-height: 40px;
      border-radius: 6px;
      background-color: @bgcolor;
      margin-left: 10px;
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      padding: 0 10px;
      cursor: pointer;

      &.active {
        background-color: pink;
        color: #8d8383;
        font-size: 16px;
      }
    }
  }
}
</style>